<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数实现、</title>
</head>
<body>
  <div id="root">
<!--      methods内部定义的函数会直接绑定到vm对象中，而Vue模板又可以直接访问vm中的属性
          所以Vue模板中可以直接调用函数
-->
      {{compose()}}

<!--     使用v-bind指定的标签的属性内部不仅可以访问到data中的数据，还可以写一些基于data中的数据的表达式，注意是表达式不是语句
          注意是只能访问到Vue对象的信息，他就无法调用alert()函数，除非把window定义在data内部

          标签内部的定义的事件函数不仅可以访问到methods中定义的函数，还可以在里面直接写函数语句

-->
      {{locationHead+locationTail.toUpperCase()}}
      <a :href="locationHead+locationTail.toUpperCase()" :abc ='num++'>点击我</a>

  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>

    new Vue({
        el:'#root',
        data:{
            firstName: 'Alice',
            lastName: 'Lucy',
            locationHead:"https://",
            locationTail: "www.baidu.com",

        },
        methods:{
            compose(){
                return this.firstName+this.lastName;
            }

        }
    })


</script>
</body>
</html>